<#include "../../common/meta.ftl">
		<script type="text/javascript" src="${ctx.contextPath}/coms/m97Date/WdatePicker.js"></script>
		<script type="text/javascript" src = "http://api.map.baidu.com/api?v=1.4"></script>
		<style>
			#map{
				width: 100%;
				height: 600px;
			}
		</style>
		<script type="text/javascript">
			var map;
			var point;
			var all = '0';
			
			function auto_height_map(){
			     var h= document.documentElement.clientHeight-85;
				 var high = document.getElementById("map");
				 high.style.height=h+"px";	 
			 } 
			 
			$(document).ready(function(){
			    auto_height_map();
				if($('#deptId')){
					$('#deptId').combotree({url:'${ctx.contextPath}/rest/dept/combotree/public',method:'get',panelHeight:300,onChange:function(){
					var deptId = getValue('deptId');
							if(document.getElementById('all').checked){
								all = '1';
							}else{
								all = '0';
							}
							$('#userId').combotree({url:'${ctx.contextPath}/rest/user/combotree/public?deptId=' + deptId + '&all=' + all,method:'get'});
						}
						});					
					$('#deptId').combotree('setValue',$('#deptVal').val());
					var deptId = getValue('deptId');
					$('#userId').combotree({url:'${ctx.contextPath}/rest/user/combotree/public?deptId=' + deptId + '&all=' + all,method:'get'});
				}
				
				initialize();
			});
			
			function initialize() {
				map = new BMap.Map('map');
				point = new BMap.Point(113.390321,34.794086);
				map.centerAndZoom(point, 14);
				map.addControl(new BMap.ScaleControl()); //比例尺控件
				map.addControl(new BMap.NavigationControl()); //左上缩放控件
			}
			
			function getUser(key){
				var deptId = getValue('deptId');
				if(key){
					all = '1';
				}else{
					all = '0';
				}
				$('#userId').combotree({url:'${ctx.contextPath}/rest/user/combotree/public?deptId=' + deptId + '&all=' + all,method:'get'});
			}
			
			function doSearch(){
				if(getValue('userId') == ''){
					alert("请选择要查询的用户！");
					return;
				}
				
				if(!$('#dateBegin').val()){
					alert("请选择要查询的起始时间！");
					return;
				}
				
				if(!$('#dateEnd').val()){
					alert("请选择要查询的结束时间！");
					return;
				}
				
				if($('#dateBegin').val().substring(0,10) != $('#dateEnd').val().substring(0,10)){
					alert("起始日期和结束日期需在同一天内！");
					return;
				}
				
				$.getJSON('${ctx.contextPath}/rest/locate/getLocus/public?userId=' + getValue('userId') + '&dateBegin=' + $('#dateBegin').val() + '&dateEnd=' + $('#dateEnd').val(),'',function(resData){
						map.clearOverlays();
							var jsonObj = jQuery.parseJSON(resData);
							if(jsonObj.length>0){
								for(var i = 0; i< jsonObj.length; i++){
									
									var locatePoint = new BMap.Point(jsonObj[i].longitude, jsonObj[i].latitude);
									if(i==0){
										map.setCenter(locatePoint);
									}
									var marker;
									if(jsonObj[i].locateType=="1"){
										marker = new BMap.Marker(locatePoint,{icon:createIcon("icon_green.png")});
									}else if(jsonObj[i].locateType=="2"){
										marker = new BMap.Marker(locatePoint,{icon:createIcon("icon_blue.png")});
									}else{
										marker = new BMap.Marker(locatePoint);
									}
									map.addOverlay(marker);
												
									marker.addEventListener("mouseover",(
									function(i) {
										return function(){
										var info_html = "<table ><tr><th align=right width='70px'>定位时间：</th><td>"+jsonObj[i].locateTime+"</td></tr>"
													+"<tr><th align=right>定位地点：</th><td >"+jsonObj[i].address+"</td></tr></table>";
											var infoWindow = new BMap.InfoWindow(info_html); 
											this.openInfoWindow(infoWindow);
										};})(i));
									
									if(i > 0){
										var polyline = new BMap.Polyline([new BMap.Point(jsonObj[i-1].longitude, jsonObj[i-1].latitude),
											new BMap.Point(jsonObj[i].longitude, jsonObj[i].latitude)],
											{strokeColor:"red",strokeWeight:"3"})
										map.addOverlay(polyline);
									}
								}
							}else{
								alert("没有数据");
							}
						
					
				});
			}
			//创建一个Icon
			function createIcon(name)
			{
				var icon = new BMap.Icon("${ctx.contextPath}/images/"+name,new BMap.Size(19, 50))
				return icon;
			}
			function getValue(inpName){
				var name = ''
				var input = document.getElementsByTagName('input');
				for (var i = 0; i < input.length; i++) {
					if(input[i].name==inpName && input[i].value != ''){
						name = input[i].value;
						break;
					}
				}
				return name;
			}
		</script>
	</head>
	<body>
		<div class="head">
			<div class="path">考勤定位 &gt; 轨迹查询</div>
		</div>
		<div class="contents"> 
			<form id="kaoQin" action="${ctx.contextPath}/rest/locate/checkWork" method="GET" style="height: 32px">
			<!-- 查询 -->
				<table class="tb_1">
					<tr>
					    <th>部门：</th>
						<td>
							<select id="deptId" name="deptId" style="width:160px; height: 20px;"/></select>
							<input type="hidden" id="deptVal" value="${deptId!''}"/>
						</td>
						<th>
							<input type="checkBox" id="all" value="1"
								onClick="getUser(this.checked)" <#if all=='1'>checked</#if>/>
						</th>
						<td>包含下级</td>
						<th>姓名：</th>
						<td>
							<select id="userId" name="userId" style="width:100px; height: 20px;"></select>
							<input type="hidden" id="userVal" value="${userId!''}"/>
						</td>
						<th>时间：</th>
			            <td>
							<input id="dateBegin" value="${dateBegin!''}" class="Wdate"
								style="width:132px; border:#AAC6D5 1px solid;" readonly="readonly" 
								onfocus="WdatePicker({maxDate:'#F{$dp.$D(\'dateEnd\')}',dateFmt:'yyyy-MM-dd HH:mm'})" />
							<input id="dateEnd" value="${dateEnd!''}" class="Wdate"
								style="width:132px; border:#AAC6D5 1px solid;" readonly="readonly" 
								onfocus="WdatePicker({minDate:'#F{$dp.$D(\'dateBegin\')}',dateFmt:'yyyy-MM-dd HH:mm'})" />
						</td>
						<td>
							<a href="#" class="btn_1" onClick="doSearch()"></a>
						</td>
					</tr>
				</table>
			</form>
			<!-- 地图 -->
			<div id="map"></div>
		</div> 
	</body>
</html>
